<template>
  <el-scrollbar style="height: 650px; overflow: hidden;">
    <el-form :model="form" :disabled="true" label-width="auto" class="formContent">
      <div class="contentTitle">
        <div class="titleText">拼团信息</div>
        <div class="lineBox"><el-divider></el-divider></div>
      </div>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="拼团名称" prop="cardCollageName">
            <el-input v-model="form.collageName" placeholder="请输入拼团名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8" v-if = "form.collageModule != '3'">
          <el-form-item label="组队方式" prop="playWay" >
            <el-select disabled v-model="form.playWay" placeholder="请选择玩法">
              <el-option v-for="dict in collage_play_way" :key="dict.value" :label="dict.label" :value="dict.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-else>
          <el-form-item label="组队方式" prop="playWay" >
            <el-input value ="福盒" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="销售单价" prop="unitPrice">
            <el-input v-model="form.unitPrice" placeholder="销售单价" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="拼团编码" prop="collageCode">
            <el-input v-model="form.collageCode"  />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
      </el-row>
      <div class="contentTitle">
        <div class="titleText">订单信息</div>
        <div class="lineBox"><el-divider></el-divider></div>
      </div>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="订单编号" prop="cardOrderNumber">
            <el-input v-model="form.cardOrderNumber" placeholder="订单编号" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="购买份数" prop="count">
            <el-input v-model="form.count" placeholder="购买份数" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单金额" prop="orderAmount">
            <el-input v-model="form.orderAmount" placeholder="请输入订单价值" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="订单实付金额" prop="actualPayment">
            <el-input v-model="form.actualPayment" placeholder="订单实付金额" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="优惠券类型" prop="discountsIssueType">
            <el-select disabled v-model="form.discountsIssueType" v-if="form.discountsIssueType">
              <el-option v-for="dict in discounts_issue_type" :key="dict.value" :label="dict.label"
                         :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="优惠券抵扣金额" prop="discountsAmount">
            <el-input v-model="form.discountsAmount" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="支付方式" prop="payWay">
            <el-select disabled v-model="form.payWay" placeholder="支付方式">
              <el-option v-for="(payWay, index) in pay_way" :key="index" :label="payWay.label" :value="payWay.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单状态" prop="cardOrderStatus">
            <el-select disabled v-model="form.cardOrderStatus" placeholder="订单状态">
              <el-option v-for="dict in card_order_status" :key="dict.value" :label="dict.label"
                         :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
<!--        <el-col :span="8">-->
<!--          <el-form-item label="是否中卡 " prop="isGainCard">-->
<!--            <el-select v-model="form.isGainCard" placeholder="是否中卡 ">-->
<!--              <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label"-->
<!--                         :value="dict.value"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="订单生成时间" prop="createTime">
            <el-input v-model="form.createTime" placeholder="订单生成时间" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付时间" prop="payTime" v-if="form.payStatus !== '0'">
            <el-input v-model="form.payTime" placeholder="支付时间" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="退款时间" prop="refundTime" v-if="form.payStatus === '5'">
            <el-date-picker clearable v-model="form.refundTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择退款时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="contentTitle">
        <div class="titleText">用户信息</div>
        <div class="lineBox"><el-divider></el-divider></div>
      </div>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="用户头像" prop="orderFreight">
            <el-image v-if="form.appUser" style="width: 100px; height: 100px"
                      :src="form.appUser.headPortrait"></el-image>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用户昵称">
            <el-input v-if="form.appUser" v-model="form.appUser.nickName" placeholder="用户名称" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="玩家号" prop="userInviteCode">
            <el-input v-model="form.userInviteCode" placeholder="玩家号" />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="contentTitle">
        <div class="titleText">地址信息</div>
        <div class="lineBox"><el-divider></el-divider></div>
      </div>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="收货地址" prop="sendProvince">
            <!-- <el-input v-model="form.sendProvince" placeholder="请输入收货省" /> -->
            <div>{{ form.sendProvince }}{{ form.sendCity }}{{ form.sendArea }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收货详细地址" prop="detailAddress">
            <el-input v-model="form.detailAddress" placeholder="请输入收货详细地址" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="收货人" prop="sendName">
            <el-input v-model="form.sendName" placeholder="请输入收货人姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货手机号" prop="sendPhone">
            <el-input v-model="form.sendPhone" placeholder="请输入收货手机号" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { ElScrollbar, ElForm, ElFormItem, ElInput, ElRow, ElCol, ElDivider, ElSelect, ElOption, ElImage, ElDatePicker } from 'element-plus';
import {getOrder} from "@/api/system/cardOrder";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { card_order_status, open_or_close, sys_yes_no, pay_way, order_source,discounts_type, collage_play_way,discounts_issue_type } = toRefs<any>(
  proxy?.useDict('card_order_status', 'order_source', 'open_or_close', 'sys_yes_no', 'pay_way', 'collage_play_way', 'discounts_type','discounts_issue_type')
);

const form = ref({
  cardCollageName: '',
  collageSeriesName: '',
  playWay: '',
  unitPrice: '',
  cardOrderNumber: '',
  count: '',
  orderPrice: '',
  actualPayment: '',
  discountsIssueType: '',
  discountsAmount: '',
  payWay: '',
  cardOrderStatus: '',
  isGainCard: '',
  createTime: '',
  payTime: '',
  refundTime: '',
  appUser: {
    headPortrait: '',
    nickName: ''
  },
  userInviteCode: '',
  companyName: '',
  companyNumber: '',
  orderFreight: '',
  sendProvince: '',
  sendCity: '',
  sendArea: '',
  detailAddress: '',
  sendName: '',
  sendPhone: '',
  shipTime: '',
  receivedTime: '',
  collageModule: ''
});

// 假设 parseTime 是一个工具函数
const parseTime = (time) => {
  // 实现时间解析逻辑
  return time;
};

const props = defineProps({
  cardOrderId: {
    type: String,
    default: ''
  }
});

const getInfo = async () => {
  const res = await getOrder(props.cardOrderId)
  form.value = res.data;
}

watch(
  () => props.cardOrderId,
  (val) => {

    // 在这里添加你需要执行的逻辑
    if (val) {
      getInfo();
      // 例如，调用某个方法来获取新的数据
      //   fetchData(newVal);
    } else {
      form.value = { ...initFormData };
      cardCollageFormRef.value?.resetFields();
    }
  },
  { immediate: true, deep: true } // 立即执行一次回调
);
</script>

<style lang="scss" scoped>
::v-deep(.el-input__wrapper){
  box-shadow:unset !important;
  background-color:unset !important;
}
::v-deep(.el-select__wrapper){
  box-shadow:unset !important;
  background-color:unset !important;
}
::v-deep(.el-select__icon){
  display:none !important
}
::v-deep(.el-input.is-disabled .el-input__inner){
  color: var(--el-text-color-regular);
  -webkit-text-fill-color: var(--el-text-color-regular);
}
::v-deep(.el-select__wrapper.is-disabled .el-select__selected-item){
  color: var(--el-text-color-regular);
}
</style>
